<!--
 * @Description: 审批单信息列表
 * @Version: 2.0
 * @Autor: 许国辉
 * @Date: 2022-10-26 08:21:01
 * @LastEditors: 许国辉
 * @LastEditTime: 2023-10-19 09:27:07
-->
<template>
  <div>
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                icon: 'clarity:info-standard-line',
                label: '查看',
                onClick: send.bind(null, record),
              },
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                label: '作废',
                tooltip: '确认作废此条行程信息？',
                popConfirm: {
                  title: '是否确认作废',
                  placement: 'left',
                  confirm: invalidExamineApproveHandle.bind(null, record),
                },
                ifShow: record.state === 1,
              },
              {
                icon: 'ant-design:copy-outlined',
                label: '同步',
                tooltip: '是否同步员工信息',
                popConfirm: {
                  title: '是否确认同步信息',
                  placement: 'left',
                  confirm: syncExamineApproveHandle.bind(null, record),
                },
                ifShow: record.state === 3,
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <a-modal
      style="width: 50%"
      v-model:visible="visible"
      title="审批单详情"
      ok-text="确认"
      :maskClosable="false"
      :keyboard="false"
      mask
      @ok="hideModal"
    >
      <a-card
        size="small"
        :bordered="false"
        :title="examineApprove?.employeeName + '的审批单'"
        style="width: 100%"
      >
        <table width="100%">
          <tr align="center" valign="middle">
            <td th:width="90px">
              <label class="col-sm-2 form-control" style="margin-bottom: 0px">员工编号</label>
            </td>
            <td th:width="120px" style="text-align: left; padding-left: 10px">
              {{ examineApprove?.employeeNo }}
            </td>
            <td th:width="90px">
              <label class="col-sm-2 form-control" style="margin-bottom: 0px">员工姓名</label>
            </td>
            <td th:width="120px" style="text-align: left; padding-left: 10px">
              {{ examineApprove?.employeeName }}
            </td>
            <td th:width="90px">
              <label class="col-sm-2 form-control" style="margin-bottom: 0px">部门编号</label>
            </td>
            <td th:width="120px" style="text-align: left; padding-left: 10px">
              {{ examineApprove?.departmentId }}
            </td>
          </tr>
          <tr align="center" valign="middle">
            <td>
              <label class="col-sm-2 form-control" style="margin-bottom: 0px">员工级别</label>
            </td>
            <td colspan="5" style="text-align: left; padding-left: 10px">
              {{ examineApprove?.employeeLeave }}
            </td>
          </tr>
          <tr align="center" valign="middle">
            <td th:width="90px">
              <label class="col-sm-2 form-control" style="margin-bottom: 0px">审批单号</label>
            </td>
            <td th:width="120px" style="text-align: left; padding-left: 10px">
              {{ examineApprove?.requestCode }}
            </td>
            <td th:width="90px">
              <label class="col-sm-2 form-control" style="margin-bottom: 0px">同步编号</label>
            </td>
            <td th:width="120px" style="text-align: left; padding-left: 10px">
              {{ examineApprove?.applyApprovalFormNo }}
            </td>
            <td th:width="90px">
              <label class="col-sm-2 form-control" style="margin-bottom: 0px">创建时间</label>
            </td>
            <td th:width="120px" style="text-align: left; padding-left: 10px">
              {{ dateUtil(examineApprove?.createTime).format('YYYY-MM-DD HH:mm:ss') }}
            </td>
          </tr>
          <tr align="center" valign="middle">
            <td th:width="90px">
              <label class="col-sm-2 form-control" style="margin-bottom: 0px">目的地</label>
            </td>
            <td th:width="120px" style="text-align: left; padding-left: 10px">
              {{ examineApprove?.destination }}
            </td>
            <td th:width="90px">
              <label class="col-sm-2 form-control" style="margin-bottom: 0px">出发日期</label>
            </td>
            <td th:width="120px" style="text-align: left; padding-left: 10px">
              {{ dateUtil(examineApprove?.dateOfDeparture).format('YYYY-MM-DD') }}
            </td>
            <td th:width="90px">
              <label class="col-sm-2 form-control" style="margin-bottom: 0px">返程日期</label>
            </td>
            <td th:width="120px" style="text-align: left; padding-left: 10px">
              {{ dateUtil(examineApprove?.dateOfReturn).format('YYYY-MM-DD') }}
            </td>
          </tr>
          <tr align="center" valign="middle">
            <td th:width="90px">
              <label class="col-sm-2 form-control" style="margin-bottom: 0px">交通工具</label>
            </td>
            <td th:width="120px" style="text-align: left; padding-left: 10px">
              {{ examineApprove?.vehicle }}
            </td>
            <td th:width="90px">
              <label class="col-sm-2 form-control" style="margin-bottom: 0px">课题</label>
            </td>
            <td th:width="120px" style="text-align: left; padding-left: 10px">
              {{ examineApprove?.task }}
            </td>
            <td th:width="90px">
              <label class="col-sm-2 form-control" style="margin-bottom: 0px">课题编号</label>
            </td>
            <td th:width="120px">
              {{ examineApprove?.taskType }}
            </td>
          </tr>
        </table>
      </a-card>
      <!-- <a-row style="height: 40px; line-height: 40px; border: 1px solid #fafaf8">
        <a-col :span="3" align="center" style="background-color: #fafafa">员工编号</a-col>
        <a-col :span="5" align="center">{{ examineApprove?.employeeNo }}</a-col>
        <a-col :span="3" align="center" style="background-color: #fafafa">员工姓名</a-col>
        <a-col :span="5" align="center">{{ examineApprove?.employeeName }}</a-col>
        <a-col :span="3" align="center" style="background-color: #fafafa">部门编号</a-col>
        <a-col :span="5" align="center">{{ examineApprove?.departmentId }}</a-col>
      </a-row>
      <a-row style="height: 40px; line-height: 40px; border: 1px solid #fafaf8">
        <a-col :span="3" align="center" style="background-color: #fafafa">员工级别</a-col>
        <a-col :span="21" align="center">{{ examineApprove?.employeeLeave }}</a-col>
      </a-row>
      <a-row style="height: 40px; line-height: 40px; border: 1px solid #fafaf8">
        <a-col :span="3" align="center" style="background-color: #fafafa">审批单号</a-col>
        <a-col :span="5" align="center">{{ examineApprove?.requestCode }}</a-col>
        <a-col :span="3" align="center" style="background-color: #fafafa">同步编号</a-col>
        <a-col :span="5" align="center">{{ examineApprove?.applyApprovalFormNo }}</a-col>
        <a-col :span="3" align="center" style="background-color: #fafafa">创建时间</a-col>
        <a-col :span="5" align="center"
          >{{ dateUtil(examineApprove?.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </a-col>
      </a-row>
      <a-row style="height: 40px; line-height: 40px; border: 1px solid #fafaf8">
        <a-col :span="3" align="center" style="background-color: #fafafa">目的地</a-col>
        <a-col :span="5" align="center">{{ examineApprove?.destination }}</a-col>
        <a-col :span="3" align="center" style="background-color: #fafafa">出发日期</a-col>
        <a-col :span="5" align="center"
          >{{ dateUtil(examineApprove?.dateOfDeparture).format('YYYY-MM-DD') }}
        </a-col>
        <a-col :span="3" align="center" style="background-color: #fafafa">返程日期</a-col>
        <a-col :span="5" align="center"
          >{{ dateUtil(examineApprove?.dateOfReturn).format('YYYY-MM-DD') }}
        </a-col>
      </a-row>
      <a-row style="height: 40px; line-height: 40px; border: 1px solid #fafaf8">
        <a-col :span="3" align="center" style="background-color: #fafafa">交通工具</a-col>
        <a-col :span="5" align="center">{{ examineApprove?.vehicle }}</a-col>
        <a-col :span="3" align="center" style="background-color: #fafafa">课题</a-col>
        <a-col :span="5" align="center">{{ examineApprove?.task }}</a-col>
        <a-col :span="3" align="center" style="background-color: #fafafa">课题编号</a-col>
        <a-col :span="5" align="center">{{ examineApprove?.taskType }} </a-col>
      </a-row> -->
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, toRaw } from 'vue';
  import {
    getExamineApprovesByParams,
    invalidExamineApprove,
    synchronizationExamineApprove,
  } from '/@/api/travelItinerary/examineApproveAPI';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { columns, searchFormSchema } from './tableExamineApproveData';
  import { Popconfirm } from 'ant-design-vue';
  // import { baseResultModel } from '/@/api/model/baseResultModel';
  import { ExamineApprove } from '/@/api/travelItinerary/model/ExamineApproveModel';
  import { dateUtil } from '/@/utils/dateUtil';
  export default defineComponent({
    components: { BasicTable, [Popconfirm.name]: Popconfirm, TableAction },
    setup() {
      const examineApprove = ref<ExamineApprove>();
      const visible = ref<boolean>(false);
      const [registerTable, { reload }] = useTable({
        title: '审批单列表',
        api: getExamineApprovesByParams,
        columns,
        ellipsis: false,
        pagination: { pageSize: 10 },
        // scroll: { x: 3000 },
        formConfig: {
          labelWidth: 100,
          actionColOptions: { span: 24 },
          schemas: searchFormSchema,
          fieldMapToTime: [
            ['dateOfDeparture', ['dateOfDepartureStart', 'dateOfDepartureEnd'], 'YYYY-MM-DD'],
            [
              'dateOfDepartureForward',
              ['dateOfDepartureForwardStart', 'dateOfDepartureForwardEnd'],
              'YYYY-MM-DD',
            ],
            ['dateOfReturn', ['dateOfReturnStart', 'dateOfReturnEnd'], 'YYYY-MM-DD'],
            [
              'dateOfReturnProlong',
              ['dateOfReturnProlongStart', 'dateOfReturnProlongEnd'],
              'YYYY-MM-DD',
            ],
          ],
        },
        striped: true,
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        showIndexColumn: true,
        tableSetting: { fullScreen: true },
      });
      function send(record: ExamineApprove) {
        // console.log(record);
        examineApprove.value = toRaw(record);
        console.log(examineApprove);
        visible.value = true;
        // carItineraryInfo(true, { ...record });
      }
      const hideModal = () => {
        visible.value = false;
      };
      // function handleSuccess() {
      //   reload();
      // }
      function invalidExamineApproveHandle(examineApproveId: number) {
        invalidExamineApprove({ examID: examineApproveId }).then(() => {
          setTimeout(() => {
            reload();
          }, 200);
        });
      }
      function syncExamineApproveHandle(examineApproveId: number) {
        synchronizationExamineApprove({ examID: examineApproveId }).then(() => {
          setTimeout(() => {
            reload();
          }, 300);
        });
      }

      return {
        reload,
        dateUtil,
        invalidExamineApproveHandle,
        syncExamineApproveHandle,
        registerTable,
        send,
        visible,
        hideModal,
        examineApprove,
      };
    },
  });
</script>
<style lang="less" scoped>
  td {
    border: solid #666666;
    border-width: 0px 1px 1px 0px;
    height: 20px;
  }

  table {
    border: solid #666666;
    border-width: 1px 0px 0px 1px;
  }
</style>
